<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy">
    <title>Html5App</title>
    <style type="text/css">
        html, body {
            height: 100%;
            background-color: #F6F6F6;
        }
        #appLoadingIndicator{
          top: 50%;
          margin-top: -15px;
          width: 60px;
          margin: auto;
          position: relative;
        }
        #appLoadingIndicator > div {
          width: 50%;
          height: 30px;
          position: absolute;
          border-radius: 50%;
        }
        #appLoadingIndicator > div:nth-child(1) {
          left: 0;
          z-index: 5;
          background-color: #FCC304;
          -webkit-animation: move1 1s linear infinite;
          animation: move1 1s linear infinite;
        }
        #appLoadingIndicator > div:nth-child(2) {
          left: 50%;
          background-color: #706F6D;
          -webkit-animation: move2 1s linear infinite;
          animation: move2 1s linear infinite;
        }

        @-webkit-keyframes move1 {
          0% {left: 0;}
          50% {left: 50%;}
          100% {left: 0;} 
        }
        @keyframes move1 {
          0% {left: 0;}
          50% {left: 50%;}
          100% {left: 0;} 
        }
        @-webkit-keyframes move2 {
          0% {left: 50%;z-index: 1;}
          49% {z-index: 1;}
          50% {left: 0;z-index: 10;}
          100% {left: 50%;z-index: 10;}
        }
        @keyframes move2 {
          0% {left: 50%;z-index: 1;}
          49% {z-index: 1;}
          50% {left: 0;z-index: 10;}
          100% {left: 50%;z-index: 10;}
        }
    </style>
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
	<div id="appLoadingIndicator">
        <div></div>
        <div></div>
    </div>
</body>
</html>
